<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>员工管理系统</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!--    thymleaf中引用static静态资源中的文件使用它的标签语法来引用-->
    <script th:src="@{/js/staff.js}"></script>
</head>
<body >
<nav class="navbar navbar-inverse" role="navigation">
    <div class="container-fluid">
        <div class="collapse navbar-collapse" id="example-navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a class="icon-bar" href="#">员工管理系统</a>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a>欢迎您,admin</a>
                </li>
                <li><a href="#">安全退出</a>
                </li>
            </ul>
        </div>
    </div>
</nav>


<div class="container-fluid">
    <div class="row">
        <!--左边菜单栏-->
        <div class="col-sm-2" id="menulist">
            <a href="" class="list-group-item active" onclick="loadPage('allStaffs')">
                员工管理</a>
            <a href="" class="list-group-item" onclick="loadPage('salary')">
                工资管理</a>
        </div>
        <!--左边菜单栏-->
        <div class="col-sm-10" id="right">

            <div class="panel panel-default">
                <div class="panel-body">
<!--                    搜索-->
                    <form role="form" class="form-inline">
                        <div class="form-group">
                            <label for="searchName">姓名</label>
                            <input type="text" class="form-control" id="searchName" name="name" placeholder="请输入姓名">
                        </div>
                        <div class="form-group">
                            <button type="button" onclick="searchByName()" class="btn btn-primary">开始搜索</button>
                            <a href="javascript:void(0)" class="btn  btn-primary" onclick="loadPage('addStaffPage')">添加员工</a>
                        </div>
                    </form>
                </div>
            </div>
            <!--
                列表展示
            -->
            <div class="table-responsive">
                <table class="table table-striped ">
                    <thead>
                    <tr>
                        <th>编号</th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>出生日期</th>
                        <th>部门</th>
                        <th>学历</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="staffList">
                    <tr>
                        <td>1</td>
                        <td>张三</td>
                        <td>女</td>
                        <td>1990-09-09</td>
                        <td>研发</td>
                        <td>研究生</td>
                        <td>
                            <div class="btn-group">
                                <a href="javascript:void(0)" onclick="loadPageParam('updateStaff',#{sid})"  class="btn btn-primary">查看工资</a>
                                <a href="" class="btn btn-info">修改信息</a><a href="" class="btn btn-danger">删除</a>
                            </div>

                        </td>
                    </tr>

                    </tbody>
                </table>
            </div>
<!--            翻页-->
            <ul class="pagination" style="float: right;">
                <li><a href="#">&laquo;</a>
                </li>
                <li class="active"><a href="#">1</a>
                </li>
                <li class="disabled"><a href="#">2</a>
                </li>
                <li><a href="#">3</a>
                </li>
                <li><a href="#">4</a>
                </li>
                <li><a href="#">5</a>
                </li>
                <li><a href="#">&raquo;</a>
                </li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>
